<template>
	<view class="publishDemand">
		<!-- 主要内容区域 -->
		<view class="publishDemand-content" v-if="reportCategoryList.length > 2">
			<view class="formLabel uni-flex uni-justify-between bankCode"
				v-for="(item, index) in reportCategoryList.slice(0, -3)" :key="index"
				:class="{'border-bottom': index < reportCategoryList.slice(0, -3).length - 1}"
				@click="goIwantReport(item)">
				<text>{{ item.label }}</text>
				<view class="uni-flex uni-align-center">
					<uni-icons type="right" size="15" style="margin-left:16rpx;" color="#666666"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 倒数第二和第三项 -->
		<view class="publishDemand-content" v-if="reportCategoryList.length > 2">
			<view class="formLabel uni-flex uni-justify-between bankCode"
				v-for="(item, index) in reportCategoryList.slice(-3, -1)" :key="index + 'middle'"
				:class="{'border-bottom': index < reportCategoryList.slice(-3, -1).length - 1}"
				@click="goIwantReport(item)">
				<text>{{ item.label }}</text>
				<view class="uni-flex uni-align-center">
					<uni-icons type="right" size="15" style="margin-left:16rpx;" color="#666666"></uni-icons>
				</view>
			</view>
		</view>

		<!-- 最后一项 -->
		<view class="publishDemand-content" v-if="reportCategoryList.length > 0">
			<view class="formLabel uni-flex uni-justify-between bankCode" :key="'last'"
				@click="goIwantReport(reportCategoryList[reportCategoryList.length - 1])">
				<text>{{ reportCategoryList[reportCategoryList.length - 1].label }}</text>
				<view class="uni-flex uni-align-center">
					<uni-icons type="right" size="15" style="margin-left:16rpx;" color="#666666"></uni-icons>
				</view>
			</view>
		</view>

		<view class="report-btn-container" @click="goreportRecord">
			<view class="report-btn">
				<image :src="`${$ImgBaseUrl}report‌-icon.png`" class="report-icon" />
				<text class="report-btn-text">举报记录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reportCategory
	} from '@/api/report.js'
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const reportCategoryList = ref([])
	const reportJobData = ref(null);
	onLoad((options) => {
		// 解析 URL 参数（解码 + 反序列化）
		if (options.item) {
			try {
				// 解码并转换为对象
				reportJobData.value = JSON.parse(decodeURIComponent(options.item));
				console.log('接收的举报数据：', reportJobData.value);
			} catch (error) {
				console.error('数据解析失败：', error);
			}
		}
	});
	const getreportCategory = async () => {
		try {
			const res = await reportCategory();
			if (res.code === 200) {
				reportCategoryList.value = res.data
				console.log('reportCategoryList.value', reportCategoryList.value)
			}
		} catch (error) {
			console.error('获取举报分类失败:', error);
		}
	}
	const goreportRecord = () => {
		uni.navigateTo({
			url: '/pages/reportCenter/reportRecord'
		})
	}

	const goIwantReport = (item) => {
		// 将 item 对象和 reportJobData 一起转换为 JSON 字符串并编码
		const itemStr = encodeURIComponent(JSON.stringify(item));
		// 新增：序列化并编码 reportJobData
		const jobDataStr = encodeURIComponent(JSON.stringify(reportJobData.value));
		// 跳转时携带两个参数：item（举报分类）和 jobData（举报对象数据）
		uni.navigateTo({
			url: `/pages/reportCenter/IwantReport?item=${itemStr}&item2=${jobDataStr}`
		});
	};

	onMounted(() => {
		getreportCategory()
	})
</script>

<style scoped lang="scss">
	.publishDemand {
		padding: 26rpx 24rpx 81rpx;
		background: #F5F5F5;
		min-height: calc(100vh - 110rpx);

		.subtitle {
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin: 32rpx 0 24rpx;
		}

		.publishDemand-content {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 26rpx 0 23rpx;
			margin-bottom: 20rpx;

			.border-bottom {
				border-bottom: 1px solid #E2E2E2;
			}

			.formLabel {
				padding: 24rpx 0;

				.slectBank {
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #303133;
					line-height: 70rpx;
				}
			}
		}

		.report-btn-container {
			position: fixed;
			bottom: 135rpx;
			left: 50%;
			transform: translateX(32%);
			width: 253rpx;
			height: 88rpx;
		}

		.report-btn {
			width: 100%;
			height: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 15rpx 0rpx #DDDFE1;
			border-radius: 54rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;

			.report-icon {
				width: 39rpx;
				height: 34rpx;
			}

			.report-btn-text {
				font-weight: 400;
				font-size: 28rpx;
				color: #303133;
			}
		}
	}
</style>